import headerInfoLess from "./index.module.less";
import { SwapOutlined } from "@ant-design/icons";
import { useSelector } from "react-redux";
import UserInfoCard from "@/components/userInfoCard";
import { Tooltip, Modal } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import { useState } from "react";
function HeaderInfo(props: any) {
  const navigate = useNavigate();
  const location = useLocation();
  const HeaderImg = useSelector((state: any) => state.user.HeaderImg);
  const username = useSelector((state: any) => state.user.username);
  const [open, setOpen] = useState(false);
  const [Title, setTitle] = useState("切换为富文本编辑器");
  const content = "切换为写作模式后，当前内容不会迁移，但会自动保存为草稿。";
  const changeEditor = () => {
    console.log(1111, location.pathname);
    if (location.pathname === "/publishArticle/markdown") {
      //当前markdown
      setTitle("切换为富文本编辑器");
      showModal();
      /* navigate("/publishArticle/rich"); */
    } else {
      setTitle("切换为Markdown编辑器");
      showModal();
      /* navigate("/publishArticle/markdown"); */
    }
  };

  const showModal = () => {
    setOpen(true);
  };

  const handleOk = () => {
    if (location.pathname === "/publishArticle/markdown") {
      //当前markdown
      navigate("/publishArticle/rich");
    } else {
      navigate("/publishArticle/markdown");
    }
  };
  const handleCancel = () => {
    setOpen(false);
  };
  const ToIndex = () => {
    navigate("/");
  };

  const releaseBtn = () => {
    props.releaseSend();
  };
  return (
    <>
      <div className={headerInfoLess.headerInfo_content}>
        <div className="left" onClick={ToIndex}>
          <img
            src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
            alt="稀土掘金"
          />
        </div>
        <div className="right">
          <div className="tips">文章将自动保存至草稿箱</div>
          <div className="draftBoxbtn">草稿箱</div>
          <div className="publishBtn" onClick={releaseBtn}>
            发布
          </div>
          <Tooltip
            placement="top"
            title={
              location.pathname === "/publishArticle/markdown"
                ? "切换为富文本编辑器"
                : "切换为Markdown编辑器"
            }
          >
            <div className="changeRichOrMarkdown" onClick={changeEditor}>
              <SwapOutlined />
            </div>
          </Tooltip>
          <div className="myIcon">
            <UserInfoCard headerImg={HeaderImg} username={username} />
          </div>
        </div>
        <Modal
          title={Title}
          open={open}
          onOk={handleOk}
          onCancel={handleCancel}
          centered
        >
          {content}
        </Modal>
      </div>
    </>
  );
}

export default HeaderInfo;
